<script lang="ts" setup>
import { useConfigStore } from '@renderer/stores'
const { config } = useConfigStore()
</script>

<template>
  <main class="bg-white p-3">
    <section class="flex gap-2">
      <el-select v-model="config.size">
        <el-option v-for="item in config.sizes" :key="item" :label="item" :value="item"> </el-option>
      </el-select>
      <el-select v-model="config.frame">
        <el-option v-for="item in config.frames" :key="item" :label="item" :value="item"> </el-option>
      </el-select>
    </section>
    <div class="mt-2">
      <span class="text-sm text-slate-600">码率</span>
      <el-slider v-model="config.videoBitrate"> </el-slider>
    </div>
  </main>
</template>

<style scoped></style>
